<template>
  <el-form 
    :model="form" 
    label-width="120px" 
    :rules="rules" 
    ref="formRef"
    label-position="top"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入患者姓名" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
          <el-select 
            v-model="form.gender" 
            placeholder="请选择性别"
            clearable
            style="width: 100%"
          >
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="年龄" prop="age">
          <el-input-number 
            v-model="form.age" 
            :min="0" 
            :max="150" 
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="电话" prop="phone">
          <el-input 
            v-model="form.phone" 
            placeholder="请输入联系电话"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="身份证号" prop="idCard">
          <el-input 
            v-model="form.idCard" 
            placeholder="请输入身份证号码"
            clearable
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="就诊日期" prop="visitDate">
          <el-date-picker 
            v-model="form.visitDate" 
            type="date" 
            placeholder="选择就诊日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="文化程度" prop="education">
          <el-select 
            v-model="form.education" 
            placeholder="请选择文化程度"
            clearable
            style="width: 100%"
          >
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中" value="高中" />
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="研究生及以上" value="研究生及以上" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="婚姻状况" prop="maritalStatus">
          <el-select 
            v-model="form.maritalStatus" 
            placeholder="请选择婚姻状况"
            clearable
            style="width: 100%"
          >
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异" value="离异" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="所在地址" prop="address">
      <el-input 
        v-model="form.address" 
        placeholder="请输入详细地址"
        clearable
      />
    </el-form-item>

    <el-form-item label="个人背景" prop="background">
      <el-input 
        v-model="form.background" 
        type="textarea" 
        :rows="3" 
        placeholder="请输入患者的个人背景信息"
        show-word-limit
        maxlength="500"
      />
    </el-form-item>

    <el-form-item label="就诊目的" prop="purpose">
      <el-input 
        v-model="form.purpose" 
        type="textarea" 
        :rows="3" 
        placeholder="请输入患者就诊的主要目的"
        show-word-limit
        maxlength="500"
      />
    </el-form-item>

    <el-form-item label="医学/心理病史" prop="history">
      <el-input 
        v-model="form.history" 
        type="textarea" 
        :rows="3" 
        placeholder="请输入患者的病史信息"
        show-word-limit
        maxlength="500"
      />
    </el-form-item>

    <el-form-item label="治疗计划" prop="plan">
      <el-input 
        v-model="form.plan" 
        type="textarea" 
        :rows="3" 
        placeholder="请输入治疗计划"
        show-word-limit
        maxlength="500"
      />
    </el-form-item>

    <el-form-item class="form-actions">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['submit', 'cancel'])

const form = ref({
  name: '',
  gender: '',
  age: null,
  phone: '',
  idCard: '',
  visitDate: '',
  education: '',
  maritalStatus: '',
  address: '',
  background: '',
  purpose: '',
  history: '',
  plan: ''
})

const formRef = ref(null)

// 增强的表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入患者姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2到10个字符之间', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 0, max: 150, message: '年龄必须在0-150之间', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, 
      message: '请输入正确的身份证号码', 
      trigger: 'blur' 
    }
  ],
  visitDate: [
    { required: true, message: '请选择就诊日期', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择文化程度', trigger: 'change' }
  ],
  maritalStatus: [
    { required: true, message: '请选择婚姻状况', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入所在地址', trigger: 'blur' },
    { min: 5, max: 100, message: '长度在5到100个字符之间', trigger: 'blur' }
  ]
}

// 初始化表单数据
const initForm = () => {
  if (props.initialData && Object.keys(props.initialData).length > 0) {
    form.value = { ...props.initialData }
    // 确保年龄是数字类型
    if (form.value.age) {
      form.value.age = Number(form.value.age)
    }
  } else {
    form.value = {
      name: '',
      gender: '',
      age: null,
      phone: '',
      idCard: '',
      visitDate: '',
      education: '',
      maritalStatus: '',
      address: '',
      background: '',
      purpose: '',
      history: '',
      plan: ''
    }
  }
}

// 监听初始数据变化
watch(() => props.initialData, () => {
  initForm()
}, { immediate: true })

// 提交表单
const handleSubmit = async () => {
  try {
    // 验证表单
    await formRef.value.validate()
    
    // 提交前处理数据
    const submitData = { 
      ...form.value,
      // 确保年龄是数字
      age: Number(form.value.age) || null
    }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.error('请检查表单填写是否正确')
  }
}

// 取消操作
const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped lang="scss">
.el-form {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 22px;
}

.form-actions {
  margin-top: 30px;
  text-align: right;
}

.el-select, .el-date-editor {
  width: 100%;
}

.el-textarea {
  :deep(.el-textarea__inner) {
    resize: vertical;
    min-height: 80px;
  }
}
</style>